<template>
  <div class="tablelist">
    <div class="title">
      <img src="@/assets/images/exchange.png" alt="">
      <div>{{$t("ee.exchangeTable")}}</div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop=""
          label=""
          width="20">
        </el-table-column>
        <el-table-column
          prop="token"
          :label="this.$t('ee.coin')">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div v-if="scope.row.token==='DETH'"><img src="@/assets/images/ethUnit.png" alt=""></div>
              <div v-if="scope.row.token==='DBTC'"><img src="@/assets/images/btcUnit.png" alt=""></div>
              <div v-if="scope.row.token==='DEOS'"><img src="@/assets/images/eosUnit.png" alt=""></div>
              <div v-if="scope.row.token==='DATX'"><img src="@/assets/images/dataxpic.png" alt=""></div>
              <span style="padding-left: 5px;">{{scope.row.token}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="trxid"
          :label="this.$t('ee.hash')">
          <template slot-scope="scope">
            <span>{{scope.row.trxid.substring(0,8)+"......"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="quantity"
          :label="this.$t('ee.quantity')">
          <template slot-scope="scope">
            <span>{{scope.row.quantity}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="blocknum"
          :label="this.$t('ee.blocknum')">
          <template slot-scope="scope">
            <span>{{scope.row.blocknum}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="from"
          :label="this.$t('ee.fromAdress')">
          <template slot-scope="scope">
            <span style="color: #159bd5;">{{scope.row.from}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="direction"
          :label="this.$t('ee.direction')">
          <template slot-scope="scope">
            <span>{{scope.row.direction}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="to"
          :label="this.$t('ee.toAdderss')">
          <template slot-scope="scope">
            <span style="color: #159bd5;">{{scope.row.to}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="time"
          :label="this.$t('ee.time')"
          align=""
          width="170px">
          <template slot-scope="scope">
            <span>{{scope.row.time}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="value"
          :label="this.$t('de.value')">
          <template slot-scope="scope">
            <span>{{scope.row.value}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label=""
          width="20">
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>
<script>
  import {getWalletTrxList} from '../../api/chainApi'
  import _ from 'lodash'
  import moment from 'moment'

  export default {
    data() {
      return {
        showwallet: false,
        tableData: [{
          blocknum: 32,
          direction: "收入",
          from: "datxos",
          quantity: "200000000.0000 DATX",
          time: "2018-10-23T06:44:32.500",
          to: "bob",
          token: "DATX",
          trxid: "a5c75b178923ea00f1d3cbefc1123e6798aaecc34a4bcf83fc9887f2aeffee2f",
          value: "$731435.70"
        }]
      }
    },
    created() {
      let ethDetail = JSON.parse(window.sessionStorage.getItem("ethWalletDetail"))
      getWalletTrxList('ETH', ethDetail.address, 50).then(res => {
        let data = res.data;
        data = _.orderBy(data, ['time'], ['desc']);
        _(data).forEach(function (obj) {
          let time = moment(obj.time);
          obj.time = time.format("YYYY-MM-DD HH:mm:ss");
        });
        this.tableData = data
      })
    },
  }
</script>
<style lang="less" scoped>
  .tablelist {
    background: #fff;
    .title {
      display: flex;
      align-items: center;
      padding: 20px;
      img {
        width: 34px;
        height: 34px;
      }
      div {
        font-size: 24px;
        padding-left: 8px;
      }
    }
    .table {
      img {
        width: 28px;
        height: 28px;
        margin-bottom: -9px
      }
      span {
        line-height: 32px;
      }
    }
    .el-table__body-wrapper {
      tr {
        height: 70px !important;
      }
    }

    // 按键样式
    button {
      color: #fff;
      width: 60px;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      background-color: #98889b;
      outline: none;
      border: none;
      cursor: pointer;
    }
    button:hover {
      opacity: .8;
    }
    .el-table__body-wrapper {
      tr {
        height: 70px !important;
      }
    }
  }
</style>



